<!doctype html>
<html lang="en">
<head>
	<title>Grid - Column Visiblity</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="wijgrid provides selection" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

	<script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
                    var grid = $("#demo").wijgrid(),
                        columns = grid.wijgrid("option", "columns"),
                        listContainer = $("#columnsList"),
                        checkBox, isChecked;

                    $.each(columns, function (index, col) {
                        isChecked = (col.visible)
                            ? "checked = 'checked'"
                            : "";

                        checkBox = $("<label><input type='checkbox' " + isChecked + " />" + col.headerText + "</label>");
                        listContainer.append(checkBox);
                        checkBox.click(function (e) {
                            columns[index].visible = $(this).children("input")[0].checked;
                            grid.wijgrid("doRefresh");
                        })
                    })
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>Column Visiblity</h2>
		</div>
		<div class="main demo">
		   
			<!-- Begin demo markup -->
         <table id="demo">
            <thead>
               <tr>
                  <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>11</td><td>14</td><td>12</td><td>0</td>
               </tr>
               <tr>
                  <td>42</td><td>9,8</td><td>10</td><td>0</td>
               </tr>
               <tr>
                  <td>72</td><td>34,8</td><td>5</td><td>0</td>
               </tr>
               <tr>
                  <td>14</td><td>18.6</td><td>9</td><td>0</td>
               </tr>
               <tr>
                  <td>51</td><td>42.4</td><td>40</td><td>0</td>
               </tr>
               <tr>
                  <td>41</td><td>7.7</td><td>10</td><td>0</td>
               </tr>
               <tr>
                  <td>51</td><td>42.4</td><td>35</td><td>0.15</td>
               </tr>
               <tr>
                  <td>65</td><td>16.8</td><td>15</td><td>0.15</td>
               </tr>
               <tr>
                  <td>22</td><td>16.8</td><td>6</td><td>0.05</td>
               </tr>
               <tr>
                  <td>57</td><td>15.6</td><td>15</td><td>0.05</td>
               </tr>
               <tr>
                  <td>65</td><td>16.8</td><td>20</td><td>0</td>
               </tr>
               <tr>
                  <td>20</td><td>64.8</td><td>40</td><td>0.05</td>
               </tr>
               <tr>
                  <td>33</td><td>2</td><td>25</td><td>0.05</td>
               </tr>
            </tbody>
         </table>
			<!-- End demo markup -->
			<div class="demo-options">
				<label for="columnsList">Columns in Grid:</label>
				<div id="columnsList">
				</div>
			</div>
		</div>
		<div class="footer demo-description">
			<p>
				This sample illustrates how columns can be hidden using the visible option. To hide a particular column, deselect the appropriate checkbox shown at the bottom of the grid. To show a particular column, select the appropriate checkbox shown at the bottom of the grid.
			</p>
		</div>
	</div>
</body>
</html>
